<!--
   (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div ng-controller="LaunchInstanceFlavorController as selectFlavorCtrl">
  <p class="step-description" translate>
    Flavors manage the sizing for the compute, memory and storage capacity of the instance.
  </p>
  <transfer-table
      tr-model="selectFlavorCtrl.transferTableModel"
      limits="selectFlavorCtrl.allocationLimits">
    <allocated ng-model="selectFlavorCtrl.allocatedFlavorFacades.length"
      validate-number-min="1" name="allocated-flavor">
  <table st-magic-search st-table="selectFlavorCtrl.displayedAllocatedFlavorFacades"
         st-safe-src="selectFlavorCtrl.allocatedFlavorFacades"
         hz-table class="table table-striped table-rsp table-detail">
    <thead>
      <tr>
        <th class="expander"></th>
        <th st-sort="name" class="rsp-p1" translate>Name</th>
        <th st-sort="vcpus" class="rsp-p1" translate>VCPUS</th>
        <th st-sort="ram" class="rsp-p1" translate>RAM</th>
        <th st-sort="totalDisk" class="rsp-p1" translate>Total Disk</th>
        <th st-sort="rootDisk" class="rsp-p2" translate>Root Disk</th>
        <th st-sort="ephemeralDisk" class="rsp-p2" translate>Ephemeral Disk</th>
        <th st-sort="isPublic" class="rsp-p1" translate>Public</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-if="selectFlavorCtrl.displayedAllocatedFlavorFacades.length === 0">
        <td colspan="10">
          <div class="no-rows-help">
            {$ ::trCtrl.helpText.noneAllocText $}
          </div>
        </td>
      </tr>
      <tr ng-repeat-start="item in selectFlavorCtrl.displayedAllocatedFlavorFacades track by item.id">
        <td class="expander">
          <span class="fa fa-chevron-right" hz-expand-detail
                title="{$ ::expandDetailsText $}"></span>
        </td>
        <td class="rsp-p1 word-break">{$ ::item.name $}</td>
        <td class="rsp-p1">
          <span class="invalid fa fa-exclamation-triangle"
          ng-show="item.errors.vcpus"
          uib-popover="{$ item.errors.vcpus $}"
          popover-placement="top" popover-append-to-body="true"
          popover-trigger="'mouseenter'"/>
          {$ ::item.vcpus $}
        </td>
        <td class="rsp-p1">
          <span class="invalid fa fa-exclamation-triangle"
            ng-show="item.errors.ram"
            uib-popover="{$ item.errors.ram $}"
            popover-placement="top" popover-append-to-body="true"
            popover-trigger="'mouseenter'"/>
          {$ ::item.ram | mb $}
        </td>
        <td class="rsp-p1">{$ ::item.totalDisk | gb $}</td>
        <td class="rsp-p2">
          <span class="invalid fa fa-exclamation-triangle"
            ng-show="item.errors.disk"
            uib-popover="{$ item.errors.disk $}"
            popover-placement="top" popover-append-to-body="true"
            popover-trigger="'mouseenter'"/>
          {$ ::item.rootDisk | gb $}
        </td>
        <td class="rsp-p2">{$ ::item.ephemeralDisk | gb $}</td>
        <td class="rsp-p1">{$ ::item.isPublic | yesno $}</td>
        <td class="action-col">
          <action-list button-tooltip="item.disabledMessage"
              bt-model="tooltipModel"
              bt-disabled="!isAvailableTable || item.enabled"
              warning-classes="'invalid'">
            <notifications>
              <span class="fa fa-exclamation-triangle invalid"
                ng-show="isAvailableTable && !item.enabled"></span>
            </notifications>
            <action action-classes="'btn btn-sm btn-default'"
                    callback="trCtrl.deallocate"
                    item="item"
                    disabled="isAvailableTable && !item.enabled">
              <span class="fa fa-arrow-down"></span>
            </action>
          </action-list>
        </td>
      </tr>
      <tr ng-repeat-end class="detail-row">
        <td colspan="9" class="detail">
          <span class="h5" translate>Impact on your quota</span>
          <div class="row">
            <div class="col-xs-4">
              <pie-chart chart-data="item.instancesChartData"
                         chart-settings="chartSettings"></pie-chart>
            </div>
            <div class="col-xs-4">
              <pie-chart chart-data="item.vcpusChartData"
                         chart-settings="chartSettings"></pie-chart>
            </div>
            <div class="col-xs-4">
              <pie-chart chart-data="item.ramChartData"
                         chart-settings="chartSettings"></pie-chart>
            </div>
          </div>
          <div class="row" ng-if="selectFlavorCtrl.cinderLimits">
            <div class="col-xs-4">
              <pie-chart chart-data="item.volumeChartData"
                         chart-settings="chartSettings"></pie-chart>
            </div>
            <div class="col-xs-4">
              <pie-chart chart-data="item.volumeStorageChartData"
                         chart-settings="chartSettings"></pie-chart>
            </div>
          </div>
          <div ng-if="selectFlavorCtrl.metadataDefs.flavor">
            <div class="row" ng-if="item.extras">
              <div class="col-sm-12">
                <metadata-display
                  available="::selectFlavorCtrl.metadataDefs.flavor"
                  existing="::item.extras">
                </metadata-display>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
    </allocated>
    <available>
<hz-magic-search-context filter-facets="selectFlavorCtrl.filterFacets">
  <hz-magic-search-bar>
  </hz-magic-search-bar>
  <table st-magic-search st-table="selectFlavorCtrl.displayedAvailableFlavorFacades"
         st-safe-src="selectFlavorCtrl.availableFlavorFacades"
         hz-table class="table table-striped table-rsp table-detail">
    <thead>
      <tr>
        <th class="expander"></th>
        <th st-sort="name" class="rsp-p1" translate>Name</th>
        <th st-sort="vcpus" class="rsp-p1" translate>VCPUS</th>
        <th st-sort-default st-sort="ram" class="rsp-p1" translate>RAM</th>
        <th st-sort="totalDisk" class="rsp-p1" translate>Total Disk</th>
        <th st-sort="rootDisk" class="rsp-p2" translate>Root Disk</th>
        <th st-sort="ephemeralDisk" class="rsp-p2" translate>Ephemeral Disk</th>
        <th st-sort="isPublic" class="rsp-p1" translate>Public</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-if="selectFlavorCtrl.displayedAvailableFlavorFacades.length === 0">
        <td colspan="10">
          <div class="no-rows-help">
            {$ ::trCtrl.helpText.noneAvailText $}
          </div>
        </td>
      </tr>
      <tr ng-repeat-start="item in selectFlavorCtrl.displayedAvailableFlavorFacades track by item.id" ng-if="!trCtrl.allocatedIds[item.id]">
        <td class="expander">
          <span class="fa fa-chevron-right" hz-expand-detail
                title="{$ ::expandDetailsText $}"></span>
        </td>
        <td class="rsp-p1 word-break">{$ ::item.name $}</td>
        <td class="rsp-p1">
          <span class="invalid fa fa-exclamation-triangle"
          ng-show="item.errors.vcpus"
          uib-popover="{$ item.errors.vcpus $}"
          popover-placement="top" popover-append-to-body="true"
          popover-trigger="'mouseenter'"/>
          {$ ::item.vcpus $}
        </td>
        <td class="rsp-p1">
          <span class="invalid fa fa-exclamation-triangle"
            ng-show="item.errors.ram"
            uib-popover="{$ item.errors.ram $}"
            popover-placement="top" popover-append-to-body="true"
            popover-trigger="'mouseenter'"/>
          {$ ::item.ram | mb $}
        </td>
        <td class="rsp-p1">{$ ::item.totalDisk | gb $}</td>
        <td class="rsp-p2">
          <span class="invalid fa fa-exclamation-triangle"
            ng-show="item.errors.disk"
            uib-popover="{$ item.errors.disk $}"
            popover-placement="top" popover-append-to-body="true"
            popover-trigger="'mouseenter'"/>
          {$ ::item.rootDisk | gb $}
        </td>
        <td class="rsp-p2">{$ ::item.ephemeralDisk | gb $}</td>
        <td class="rsp-p1">{$ ::item.isPublic | yesno $}</td>
        <td class="action-col">
          <action-list button-tooltip="item.disabledMessage"
              bt-model="tooltipModel"
              bt-disabled="!isAvailableTable || item.enabled"
              warning-classes="'invalid'">
            <notifications>
              <span class="fa fa-exclamation-triangle invalid"
                ng-show="isAvailableTable && !item.enabled"></span>
            </notifications>
            <action action-classes="'btn btn-sm btn-default'"
                    callback="trCtrl.allocate"
                    item="item"
                    disabled="isAvailableTable && !item.enabled">
              <span class="fa fa-arrow-up"></span>
            </action>
          </action-list>
        </td>
      </tr>
      <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[item.id]">
        <td colspan="9" class="detail">
          <span class="h5" translate>Impact on your quota</span>
          <div class="row">
            <div class="col-xs-4">
              <pie-chart chart-data="item.instancesChartData"
                         chart-settings="chartSettings"></pie-chart>
            </div>
            <div class="col-xs-4">
              <pie-chart chart-data="item.vcpusChartData"
                         chart-settings="chartSettings"></pie-chart>
            </div>
            <div class="col-xs-4">
              <pie-chart chart-data="item.ramChartData"
                         chart-settings="chartSettings"></pie-chart>
            </div>
          </div>
          <div class="row" ng-if="selectFlavorCtrl.cinderLimits">
            <div class="col-xs-4">
              <pie-chart chart-data="item.volumeChartData"
                         chart-settings="chartSettings"></pie-chart>
            </div>
            <div class="col-xs-4">
              <pie-chart chart-data="item.volumeStorageChartData"
                         chart-settings="chartSettings"></pie-chart>
            </div>
          </div>
          <div ng-if="selectFlavorCtrl.metadataDefs.flavor">
            <div class="row" ng-if="item.extras">
              <div class="col-sm-12">
                <metadata-display
                  available="::selectFlavorCtrl.metadataDefs.flavor"
                  existing="::item.extras">
                </metadata-display>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</hz-magic-search-context>
    </available>
  </transfer-table>
</div>
